<template>
  <view class="container">
    <view class="logo-section">
      <image class="logo" src="/static/logo.png" />
    </view>

    <view class="page-section">
      <view class="page-section-title">易呼救</view>
    </view>

    <view
      class="form-section"
      style="display: flex; justify-content: center; align-items: center"
    >
      <!-- <view class="input-wrapper">
          <input type="number" class="input" placeholder="请输入手机号" v-model:value="phoneNumber" />
          <button class="login-button" @click="login">登录</button>
        </view> -->

      <view class="input-wrapper">
        <!-- <input type="number" class="input" placeholder="本机号码一键登录" v-model:value="localPhoneNumber" /> -->
        <u-button type="primary" class="login-button" @click="quickLogin"
          >本机号码一键登录</u-button
        >
        <view> </view>
      </view>
    </view>

    <view class="privacy-section">
      <u-checkbox v-model="agreedPrivacy" class="checkbox"
        >同意隐私协议</u-checkbox
      >
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const phoneNumber = ref('')
const localPhoneNumber = ref('')
const agreedPrivacy = ref(true)

const showToast = (title) => {
  uni.showToast({
    title,
    icon: 'none'
  })
}

const login = () => {
  if (!agreedPrivacy.value) {
    showToast('请同意隐私协议')
  }

  // 这里执行你的登录逻辑
}

const quickLogin = () => {
  console.log(agreedPrivacy.value, 'agreedPrivacy.value')
  if (!agreedPrivacy.value) {
    showToast('请同意隐私协议')
    return
  }
  uni.navigateTo({
    url: '/pages/index/index' // 这里是你要跳转的页面路径
  })

  // 这里执行你的一键登录逻辑
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
}
.logo-section {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}
.logo {
  width: 240rpx;
  height: 240rpx;
}
.page-section {
  width: 100%;
}
.page-section-title {
  font-size: 48rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
}
.form-section {
  width: 100%;
  position: absolute;
  bottom: 30%;
  margin-bottom: 40rpx;
}
.privacy-section {
  width: 100%;
  position: absolute;
  bottom: 28%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40rpx;
}
.input {
  flex: 1;
  height: 40rpx;
  border: 1px solid #ccc;
  border-radius: 8rpx;
  padding: 0 20rpx;
}
.login-button {
  display: block;
  height: 80rpx;
  line-height: 80rpx;
  width: 80%;
  /* margin-right: 10px; */
  /* padding: 0 10px; */
  border: none;
  background-color: #0084ff;
  color: white;
  border-radius: 8rpx;
  margin: 0;
}
.checkbox {
  margin-left: 20rpx;
}
</style>
